<script setup lang="ts">
import { ref, shallowReactive, reactive, onMounted, onUnmounted } from 'vue'
import QIcon from '@/components/q-icon/q-icon.vue'
import { doGetConcernListFromMine } from '@/apis/concern'
import { EMPTY_GB } from '@/constant'
import type { ConcernItem, RequestParams } from '@/basePackage/pages/concern/types'
import useCollectionDispatcher from '@/store/dispatcher/useCollectionDispatcher'

const $collectionDispatcherStore = useCollectionDispatcher()
const pageConfig = reactive({
  size: 10,
  current: 1,
  pages: 1,
})
const searchConfig = reactive({
  shopName: '',
  status: 'ALL_SHOP',
})
const list = ref<ConcernItem[]>([])

initConcernList()

const handleNavToShop = (shopId: Long) => {
  console.log(123)

  uni.navigateTo({
    url: `/basePackage/pages/merchant/Index?shopId=${shopId}`,
  })
}
async function initConcernList(isLoad = false) {
  if (!isLoad) {
    // 刷新
    pageConfig.current = 1
    list.value = await getConcern({ ...pageConfig, ...searchConfig })
  } else if (isLoad && pageConfig.current < pageConfig.pages) {
    // 更新
    pageConfig.current++
    list.value = list.value.concat(await getConcern({ ...pageConfig, ...searchConfig }))
  }
}
/**
 * 获取关注列表
 * @param {RequestParams} param
 */
async function getConcern(params: RequestParams) {
  const { data, code, msg } = await doGetConcernListFromMine(params)
  if (code !== 200) {
    uni.showToast({ title: `${msg ? msg : '获取关注列表失败'}`, icon: 'none' })
    return []
  }
  pageConfig.pages = data.pages
  return data.records
}
onMounted(() => $collectionDispatcherStore.addCommoditySubscriber(() => initConcernList()))
onUnmounted(() => $collectionDispatcherStore.removeCommoditySubscriber(() => initConcernList()))
const loadMore = () => {
  initConcernList(true)
}
defineExpose({
  loadMore,
})
</script>

<template>
  <view v-for="item in list" :key="item.shopId" class="container" @click="handleNavToShop(item.shopId)">
    <view class="container__image">
      <u-image width="100%" height="100%" border-radius="15" :src="item.logo"></u-image>
    </view>
    <view class="container__info">
      <view class="container__info--name">
        <text class="container__info--name-text">{{ item.shopName }}</text>
        <view v-if="item.newProducts" class="container__name-new">
          <view class="container__name-new--round"></view>
          <view clss="container__name-new--text">有上新</view>
        </view>
      </view>
      <view class="container__info-footer">
        <text class="container__info-footer--num">{{ item.numberFollowers }}人关注</text>
        <view class="container__info-footer-btn">
          <q-icon size="30rpx" style="margin-right: 8rpx" name="icon-dianpu2"></q-icon>
          <text>进入店铺</text>
        </view>
      </view>
    </view>
  </view>
  <q-empty v-if="!list.length" :background="EMPTY_GB.COLLECTION_EMPTY" title="暂无收藏~" />
</template>

<style scoped lang="scss">
@include b(container) {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #bbbb;
  padding: 10rpx;
  @include e(image) {
    width: 200rpx;
    height: 200rpx;
    border-radius: 15rpx;
  }
  @include e(info) {
    flex: 1;
    height: 200rpx;
    padding: 20rpx 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @include m(name) {
      font-size: 32rpx;
      font-weight: 700;
      color: #101010;
      display: flex;
      justify-content: space-between;
    }
    @include m(name-text) {
      width: 250rpx;
      font-size: 28rpx;
      text-align: LEFT;
      color: #2f2f2f;
      overflow: hidden;
      white-space: nowrap; //内容超出不换行
      text-overflow: ellipsis;
    }
  }
  @include e(name-new) {
    margin-right: 34rpx;
    @include flex;
    @include m(round) {
      width: 28rpx;
      height: 28rpx;
      background: #ffffff;
      border: 2rpx solid #11a741;
      border-radius: 50%;
      margin-right: 10rpx;
      position: relative;
      &::before {
        content: ' ';
        display: block;
        width: 20rpx;
        height: 20rpx;
        background: #11a741;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  @include e(info-footer) {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  @include e(info-footer-btn) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15rpx;
    border: 1px solid #bbbb;
    padding: 5rpx 15rpx;
  }
}
</style>
